<template>
  <div class="content">

    <!-- 搜索栏 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="请选择订单状态" clearable style="width: 150px;">
            <el-option label="待付款" value="0" />
            <el-option label="待出行" value="1" />
            <el-option label="已完成" value="3" />
            <el-option label="已取消" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div> 


    <!-- 表格 -->
    <div class="tableBody">
      <el-table :data="orderList" stripe>
        <el-table-column prop="orderNo" label="订单编号" width="150" />
        <el-table-column prop="productName" label="产品名称" />
        <el-table-column prop="name" label="用户昵称" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="adultPrice" label="成人价格">
          <template #default="scope">¥{{ scope.row.adultPrice }}</template>
        </el-table-column>
        <el-table-column prop="childPrice" label="儿童价格">
          <template #default="scope">¥{{ scope.row.childPrice }}</template>
        </el-table-column>
        <el-table-column prop="statusText" label="订单状态" />
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>

      <!-- 分页 -->
      <el-pagination style="margin-top: 20px; text-align: right" background
        layout="total, sizes, prev, pager, next, jumper" :current-page="pageNum" :page-size="pageSize" :total="total"
        :page-sizes="[10, 20, 50, 100]" @current-change="handlePageChange" @size-change="handleSizeChange" />

    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getContentList } from '../api/order'

const orderList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

const searchForm = reactive({
  status: null
})

// 获取订单列表（支持分页和条件）
const search = async () => {
  const res = await getContentList(pageNum.value, pageSize.value, searchForm.status || null)
  orderList.value = res.data.records
  total.value = res.data.total
}

// 页码切换
const handlePageChange = (newPage) => {
  pageNum.value = newPage
  search()
}

// 每页条数变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  pageNum.value = 1 // 每次更改条数时回到第一页
  search()
}


// 初始化加载
onMounted(() => {
  search()
})

// 删除操作（这里只是占位）
const deleteOrder = (id) => {
  console.log('删除订单 ID:', id)
  // 可调用删除接口后再刷新 search()
}
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search {
  width: 97%;  
  margin: 10px 0;
  padding: 20px 10px 0 10px;
}

.tableBody {
  width: 97%;
}
</style>
